$(function () {
  // 需求1：点击a链接，显示隐藏
  $('#loginBox a').on('click', function () {
    // 点击的登录框内部的a链接
    // 显示的注册区域，隐藏登录区域
    $('#regBox').show()
    $('#loginBox').hide()
  })

  $('#regBox a').on('click', function () {
    // 点击的注册框内部的a链接
    // 显示的登录区域，隐藏注册区域
    $('#loginBox').show()
    $('#regBox').hide()
  })

  const form = layui.form
  form.verify({
    // 属性是校验名称，值是校验规则
    // 值有两种类型，函数和数组
    username: [
      /^[a-zA-Z0-9]{1,10}$/,
      '用户名必须1到10位数字和字母'
    ],
    pwd: [
      /^[a-zA-Z0-9]{6,12}$/,
      '密码必须6到12位数字和字母'
    ],

    // 确认密码规则
    rePwd: function (value) {
      let pwd = $('#regBox [name="password"]').val()
      if (pwd !== value) {
        return "两次密码输入不一致"
      }
    }
  })

  // 需求3：注册功能
  const layer = layui.layer
  $('#formReg').on('submit', function (e) {
    // 阻止表单默认跳转
    e.preventDefault()
    //  发送axios
    axios({
      url: '/api/reguser',
      method: 'POST',
      data: $(this).serialize()
    }).then(res => {
      //成功回调
      // console.log(res)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      layer.msg("恭喜您，注册用户成功")
      $('#regBox a').click()
      $("#formReg")[0].reset()
    });
  })


  // 需求4.登录功能
  $('#formLogin').on('submit', function (e) {
    // 阻止表单默认跳转
    e.preventDefault()
    //  发送axios
    axios({
      url: '/api/login',
      method: 'POST',
      data: $(this).serialize()
    }).then(res => {
      //成功回调
      // console.log(res)
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      layer.msg("恭喜您，登录成功")
      localStorage.setItem('token', res.data.token)
      // 页面跳转到index.html
      location.href = '/index.html'
    });
  })
})